<template>
  <fieldset>
    <legend>keep-alive组件</legend>
    <button
      :class="['tab-button', { active: btn == aaa }]"
      v-for="(btn, index) in arr"
      :key="index"
      @click="trans(btn)"
    >
      {{ btn }}
    </button>
    <keep-alive>
      <div class="tab" :is="tab">
        <!-- <father></father> -->
      </div>
    </keep-alive>
  </fieldset>
</template>
<style scoped>
.tab-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}

.tab-button:hover {
  background: #e0e0e0;
}

.tab-button.active {
  background: yellow;
}

.tab {
  border: 1px solid #ccc;
  padding: 10px;
}

h2 {
  margin: 0;
}
</style>
<script>
import father from "./father.vue";
import fathertwo from "./fathertwo.vue";
import fatherthree from "./fatherthree.vue";

export default {
  data() {
    return {
      arr: ["father", "fathertwo", "fatherthree"],
      aaa: "father",
    };
  },
  components: {
    father,
    fathertwo,
    fatherthree,
  },
  methods: {
    trans(btn) {
      console.log("我想你是爱我的");
      console.log(btn);
      this.aaa = btn;
    },
  },
  computed: {
    tab() {
      return this.aaa;
    },
  },
};
</script>
